<!-- subpkg_consult/room/components/message-info.vue -->
<script setup>
  function dateFormat(date, formatStr) {
    return '00:01:02'
  }

  // #ifdef H5
  // import { dateFormat } from 'licia'
  // // #endif

  // // #ifndef H5
  // import dateFormat from 'miniprogram-licia/dateFormat'
  // // #endif

  import { useUserStore } from '@/stores/user'
  const userStore = useUserStore()
</script>

<template>
  <!-- 文字/图片消息 -->
  <view class="message-item reverse">
    <image class="room-avatar" :src="userStore.basicInfo.avatar" />
    <view class="room-message">
      <view class="time">{{ dateFormat(Date.now(), 'HH:MM:ss') }}</view>
      <!-- 图片消息 -->
      <image class="image" src="/static/loading.gif" mode="widthFix" />
    </view>
  </view>
</template>

<style lang="scss">
  .message-item {
    display: flex;
    align-self: flex-start;
    margin-top: 60rpx;

    .room-avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
    }

    .room-message {
      margin-left: 20rpx;
    }

    .time {
      font-size: 26rpx;
      color: #979797;
    }

    .image {
      max-width: 420rpx;
      margin-top: 10rpx;
    }

    .text {
      max-width: 420rpx;
      line-height: 1.75;
      padding: 30rpx 40rpx;
      margin-top: 16rpx;
      border-radius: 20rpx;
      font-size: 30rpx;
      color: #3c3e42;
      background-color: #fff;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: -25rpx;
        width: 26rpx;
        height: 52rpx;
        background-image: url(https://consult-patient.oss-cn-hangzhou.aliyuncs.com/static/images/im-arrow-1.png);
        background-size: contain;
      }
    }

    &.reverse {
      flex-direction: row-reverse;
      align-self: flex-end;

      .room-message {
        margin-left: 0;
        margin-right: 20rpx;
      }

      .time {
        text-align: right;
      }

      .text {
        background-color: #16c2a3;
        color: #fff;

        &::after {
          left: auto;
          right: -25rpx;
          background-image: url(https://consult-patient.oss-cn-hangzhou.aliyuncs.com/static/images/im-arrow-2.png);
        }
      }
    }
  }
</style>
